<template>
  <div class="PostList">
    <div v-if="loading" class="load">loading...</div>
    <div v-else class="posts">
      <ul>
        <li v-for="post in posts" :key="post.id">
          <router-link
            :to="{ name: 'user_info', params: { name: post.author.loginname } }"
            :title="post.author_id"
          >
            <img :src="post.author.avatar_url" alt="">
          </router-link>
          <span class="count"><span class="reply">{{post.reply_count}}</span>/{{post.visit_count}}</span>
          <router-link
            :to="{ name: 'post_content', params: { name: post.author.loginname,id: post.id } }"
            :title="post.title"
          >
           {{post.title }}
          </router-link>
          <span class="last_reply">
            {{ post.last_reply_at | formatDate }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      posts: [],
    };
  },
  beforeMount() {
    this.loading = true;
    this.getData();
  },
  methods: {
    async getData() {
      const { data } = await this.$http.get("topics", {
        page: 1,
        limit: 20,
      });
     
      if (data.success) {
        this.posts = data.data;
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>

.PostList .posts{
  background-color: white;
  width: 65%;
  margin-left: 5%;
  margin-top: 15px;
}
.PostList .posts ul{
  list-style: none;
  padding-left: 7px;
  padding-right: 7px;
}
.PostList .posts ul li{
  border-bottom: 1px solid #e7e7e7;
  height: 45px;
}
li img{
  width: 30px;
  height: 30px;
  border-radius:3px;
  position: relative;
  top: 7px;
}
.PostList .posts ul li .count{
  width: 90px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
}
.PostList .posts ul li .count .reply{
  font-size: 16px;
  color: rgb(108, 106, 237);
}
.PostList .posts  a{
  text-decoration: none;
  max-width: 70%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  color: #160606e7;
}
.PostList .posts a:visited{
  color: #a39c9c;
}
.PostList .posts .last_reply{
  float: right;
  margin-right:5px;
  margin-top: 7px;
  font-size: 14px;
}
.PostList .posts ul li:hover{
  background-color: hsla(60, 22%, 95%, 0.904);
}
</style>